<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>区块链信息</title>
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/blockChainInfo.css">
    <style>
        body, html{font-family: PingFangSC-Regular, sans-serif;}
        .downheader{
            width: 100%;
            height: 60px;
            background: #fff;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 10px;
            box-sizing: border-box;
            position: fixed;
            z-index: 99;
            top: 0;
            left: 0;
        }
        .logo_img{
            width: 127px;
            height: 41px;
        }
        .logo_img img{
            width: 100%;
            height: 100%;
            display: block;
        }
        .down_btn{
            width: 100px;
            height: 35px;
            border: 1px solid #ccc;
            border-radius: 4px;
            line-height: 37px;
            text-align: center;
            font-size: 14px;
            font-weight: 400;
            color: #000;
        }
    </style>
</head>

<body>
    <div class="blockChainInfo">
        <div class="downheader">
            <div class="logo_img">
                <img src="./image/share_logo.png" alt="">
            </div>
            <a class="download"><div class="down_btn">立即下载</div></a>
        </div>
        <div class="goods_name_box">
            <div class="goods_name"></div>
            <span class="goods_adress">
                产品唯一码:
                <span class="goods_unique_code"></span>
        </div>
        <div class="number">
            <div class="num1">
                <div class="amount">
                    <span class="keeping_count">0</span>
                </div>
                <div class="count">数量</div>
            </div>
            <div class="nums">
                <div class="amount">¥
                    <span class="price">0.00</span>
                </div>
                <div class="count">单价</div>
            </div>
            <div class="num3">
                <div class="amount red_color">
                    <span class="up_down_percent">+00</span>%
                    <img class="jiantouhong" src="./image/jiantouhong.png" alt="">
                </div>
                <div class="count">涨幅度</div>
            </div>
        </div>
        <div class="zhexiantu">
            <div class="zhexianTab">
                <div class="today tab actives">今日</div>
                <!-- <div class="other"> -->
                <div class="week tab">本月</div>
                <div class="month tab">本周</div>
                <!-- </div> -->
            </div>
            <div>
                <div id="container" style="width: 100%;height:200px;"></div>
            </div>
        </div>
        <div class="line"></div>
        <div class="blockChainTitle">
            <div class="blockChainDesc">区块链信息</div>
            <div class="blockChainDay">
                <span class="block_days">0</span>天</div>
        </div>
        <div class="blockChainList">

        </div>
    </div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js">
</script>

<script type="text/javascript">
    $(function () {
        (function ($) {
            $.getUrlParam = function (name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg);
                if (r != null) return unescape(r[2]); return null;
            }

            $.render_in_repo_chain = function (chain) {
                var part = '<div class="blockChainItem">' +
                    '<div class="blockChainListLeft">' +
                    chain.node_datetime.split(' ')[0] +
                    '<br />' +
                    chain.node_datetime.split(' ')[1] +
                    '</div>' +
                    '<div class="blockChainListRight">' +
                    '<div class="blockChainListRightOne">' + chain.title + '</div>' +
                    '<div class="blockChainListRightTwo">' + chain.contents[0] + '</div>' +
                    '</div>' +
                    '</div>';
                return part;
            }

            $.render_pre_sale_chain = function (chain) {
                var part = '<div class="blockChainItem">' +
                    '<div class="blockChainListLeft">' +
                    chain.node_datetime.split(' ')[0] +
                    '<br />' +
                    chain.node_datetime.split(' ')[1] +
                    '</div>' +
                    '<div class="blockChainListRight">' +
                    '<div class="blockChainListRightOne">' + chain.title + '</div>' +
                    '<div class="blockChainListRightTwo">' + chain.contents[0] + '</div>' +
                    '<div class="blockChainListRightTwo">' + chain.contents[1] + '</div>' +
                    '</div>' +
                    '</div>';
                return part;
            }

            $.join_lines = function(lines) {
                var s = '';
                for (var i=0; i<lines.length; i++){
                    s += '<div class="blockChainListRightTwo">' + lines[i] + '</div>'
                }
                return s;
            }

            $.render_pre_sale_buy_in_chain = function (chain) {
                var part = '<div class="blockChainItem">' +
                    '<div class="blockChainListLeft">' +
                    chain.node_datetime.split(' ')[0] +
                    '<br />' +
                    chain.node_datetime.split(' ')[1] +
                    '</div>' +
                    '<div class="blockChainListRight">' +
                    '<div class="blockChainListRightOne">' + chain.title + '</div>' +
                    $.join_lines(chain.contents) +
                    '</div>' +
                    '</div>';
                return part;
            }

            $.render_publish_sell_chain = function (chain) {
                var part = '<div class="blockChainItem">' +
                    '<div class="blockChainListLeft">' +
                    chain.node_datetime.split(' ')[0] +
                    '<br />' +
                    chain.node_datetime.split(' ')[1] +
                    '</div>' +
                    '<div class="blockChainListRight">' +
                    '<div class="blockChainListRightOne">' + chain.title + '</div>' +
                    '<div class="blockChainListRightTwo">&nbsp;&nbsp;</div>' +
                    '<div class="blockChainListRightTwo">&nbsp;&nbsp;</div>' +
                    '<div class="blockChainListRightOne">' + chain.repo_info + '</div>' +
                    '</div>' +
                    '</div>';
                return part;
            }

            $.render_direct_sell_chain = function (chain) {
                var part = '<div class="blockChainItem">' +
                    '<div class="blockChainListLeft">' +
                    chain.node_datetime.split(' ')[0] +
                    '<br />' +
                    chain.node_datetime.split(' ')[1] +
                    '</div>' +
                    '<div class="blockChainListRight">' +
                    '<div class="blockChainListRightOne">' + chain.title + '</div>' +
                    '<div class="blockChainListRightTwo">&nbsp;&nbsp;</div>' +
                    '<div class="blockChainListRightTwo">&nbsp;&nbsp;</div>' +
                    '<div class="blockChainListRightOne">' + chain.repo_info + '</div>' +
                    '</div>' +
                    '</div>';
                return part;
            }

            $.render_direct_give_chain = function (chain) {
                var part = '<div class="blockChainItem">' +
                    '<div class="blockChainListLeft">' +
                    chain.node_datetime.split(' ')[0] +
                    '<br />' +
                    chain.node_datetime.split(' ')[1] +
                    '</div>' +
                    '<div class="blockChainListRight">' +
                    '<div class="blockChainListRightOne">' + chain.title + '</div>' +
                    '<div class="blockChainListRightTwo">&nbsp;&nbsp;</div>' +
                    '<div class="blockChainListRightTwo">&nbsp;&nbsp;</div>' +
                    '<div class="blockChainListRightOne">' + chain.repo_info + '</div>' +
                    '</div>' +
                    '</div>';
                return part;
            }

            $.render_market_chain = function (chain) {
                var part = '<div class="blockChainItem">' +
                    '<div class="blockChainListLeft">' +
                    chain.node_datetime.split(' ')[0] +
                    '<br />' +
                    chain.node_datetime.split(' ')[1] +
                    '</div>' +
                    '<div class="blockChainListRight">' +
                    '<div class="blockChainListRightOne">' + chain.title + '</div>' +
                    $.join_lines(chain.contents) +
                    '</div>' +
                    '</div>';
                return part;
            }

            $.render_accept_chain = function (chain) {
                var part = '<div class="blockChainItem">' +
                    '<div class="blockChainListLeft">' +
                    chain.node_datetime.split(' ')[0] +
                    '<br />' +
                    chain.node_datetime.split(' ')[1] +
                    '</div>' +
                    '<div class="blockChainListRight">' +
                    '<div class="blockChainListRightOne">' + chain.title + '</div>' +
                    '<div class="blockChainListRightTwo">&nbsp;</div>' +
                    '</div>' +
                    '</div>';
                return part;
            }

        })(jQuery);

        var token = $.getUrlParam('token');

        var id = $.getUrlParam('unique_code');
        var host = $.getUrlParam('host');
        var protocol = $.getUrlParam('protocol');

        $.support.cors = true;

        $.ajax({
            type: 'GET',
            url: protocol + '://' + host +'/product/blocks/' + id,
            contentType: 'application/json',
            withCredentials: true,
            dataType: 'json',
            success: function (data) {
                $(".goods_name").html(data.product_name);
                $(".goods_unique_code").html(data.unique_code);
                $(".keeping_count").html(data.product_keeping_count);
                $(".price").html(data.last_trade_price);
                $(".up_down_percent").html(data.product_up_down_percent);
                $(".block_days").html(data.chain.days);
                $(".download").attr("href", data.app_download_link);
                for (var i = 0; i < data.chain.flows.length; i++) {
                    var chain = data.chain.flows[i];
                    if (chain.chain_type == 'IN_REPO') {
                        $(".blockChainList").append($.render_in_repo_chain(chain));
                    }
                    if (chain.chain_type == 'PRE_SALE') {
                        $(".blockChainList").append($.render_pre_sale_chain(chain));
                    }
                    if (chain.chain_type == 'PRE_SALE_BUY_IN') {
                        $(".blockChainList").append($.render_pre_sale_buy_in_chain(chain));
                    }
                    if (chain.chain_type == 'PUBLISH_SELL') {
                        $(".blockChainList").append($.render_publish_sell_chain(chain));
                    }
                    if (chain.chain_type == 'MARKET') {
                        $(".blockChainList").append($.render_market_chain(chain));
                    }
                    if (chain.chain_type == 'DIRECT_SELL') {
                        $(".blockChainList").append($.render_direct_sell_chain(chain));
                    }
                    if (chain.chain_type == 'DIRECT_GIVE') {
                        $(".blockChainList").append($.render_direct_give_chain(chain));
                    }
                    if (chain.chain_type == 'ACCEPT') {
                        $(".blockChainList").append($.render_accept_chain(chain));
                    }
                }
            }
            // headers: {
            //     // Authorization: 'JWT '+token,
            //     "Access-Control-Allow-Origin": '*'
            // },
        })
    })
</script>

<script src="https://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script>
    $(function () {
        var line_data = [], weekdata = [], monthdata = [];
        var current = "今日";
        $.getUrlParam = function (name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]); return null;
        }

        var id = $.getUrlParam('unique_code');
        var host = $.getUrlParam('host');
        var protocol = $.getUrlParam('protocol');

        $('.tab').click(function () {
            line_data = [];
            var i = $(this).index();//下标第一种写法
            $(this).addClass('actives').siblings().removeClass('actives');
            current = $(this).html();

            $.ajax({
                type: 'GET',
                url: protocol + '://' + host +'/product/blocks/' + id,
                contentType: 'application/json',
                withCredentials: true,
                dataType: 'json',
                async: false,
                success: function (data) {
                    // console.log(current)
                    if(current == "今日") {
                        for (var i = 0; i < data.today_price_data.points.length; i++) {
                            var point = data.today_price_data.points[i];
                            line_data.push(parseFloat(point.value));
                        }
                    }else if(current == "本周") {
                        for (var i = 0; i < data.week_price_data.points.length; i++) {
                            var point = data.week_price_data.points[i];
                            line_data.push(parseFloat(point.value));
                        }
                    }else{
                        for (var i = 0; i < data.month_price_data.points.length; i++) {
                            var point = data.month_price_data.points[i];
                            line_data.push(parseFloat(point.value));
                        }
                    }
                    console.log(line_data)
                    $('#container').highcharts({
                        chart: {
                            height: 200,
                            type: 'line'
                        },
                        title: {
                            text: ''
                        },
                        subtitle: {
                            text: ''
                        },
                        yAxis: {
                            title: {
                                text: ''
                            }
                        },
                        credits: {
                            enabled: false
                        },
                        colors: ['#F3F3F3'],
                        xAxis: {
                            // categories: ['', '', '', '', '', '', '', '', '', '', '', '']
                        },
                        series: [{
                            name: ' ',
                            data: line_data
                        }]
                    }, function (chart) { // on complete
                        var min = 1000,
                            max = 0,
                            pointsToShow = [0, 0],
                            points = chart.series[0].points;
                        Highcharts.each(points, function (p) {
                            if (p.y > max) {
                                pointsToShow[0] = p.index;
                                max = p.y;
                            }
                            if (p.y < min) {
                                pointsToShow[1] = p.index;
                                min = p.y;
                            }
                        });
                        render(chart, points[pointsToShow[0]], '￥');
                        render(chart, points[pointsToShow[1]], '￥');
                        //var point = chart.series[0].points[8];
                    });
                    function render(chart, point, text) {
                        // console.log(chart.renderer)
                        chart.renderer.label(text + ' ' + point.y, point.plotX + chart.plotLeft - 20, point.plotY + chart.plotTop - 45, 'callout', point.plotX + chart.plotLeft, point.plotY + chart.plotTop)
                            .css({
                                color: '#fff',
                                align: 'center',
                                borderWidth: "5px",
                                borderColor: "red",
                                borderStyle: "solid",

                            })
                            .attr({
                                fill: 'rgba(0, 0, 0, 0.75)',
                                padding: 8,
                                r: 5,
                                zIndex: 6,
                            })
                            .add();
                    }
                }
            })


        });




        $.ajax({
            type: 'GET',
            url: protocol + '://' + host +'/product/blocks/' + id,
            contentType: 'application/json',
            withCredentials: true,
            dataType: 'json',
            success: function (data) {
                for (var i = 0; i < data.today_price_data.points.length; i++) {
                    var point = data.today_price_data.points[i];
                    line_data.push(parseFloat(point.value));
                }
                for (var i = 0; i < data.week_price_data.points.length; i++) {
                    var point = data.week_price_data.points[i];
                    weekdata.push(parseFloat(point.value));
                }
                for (var i = 0; i < data.month_price_data.points.length; i++) {
                    var point = data.month_price_data.points[i];
                    monthdata.push(parseFloat(point.value));
                }
                $('#container').highcharts({
                    chart: {
                        height: 200,
                        type: 'line'
                    },
                    title: {
                        text: ''
                    },
                    subtitle: {
                        text: ''
                    },
                    yAxis: {
                        title: {
                            text: ''
                        }
                    },
                    credits: {
                        enabled: false
                    },
                    colors: ['#F3F3F3'],
                    xAxis: {
                        // categories: ['', '', '', '', '', '', '', '', '', '', '', '']
                    },
                    series: [{
                        name: ' ',
                        data: line_data
                    }]
                }, function (chart) { // on complete
                    var min = 1000,
                        max = 0,
                        pointsToShow = [0, 0],
                        points = chart.series[0].points;
                    Highcharts.each(points, function (p) {
                        if (p.y > max) {
                            pointsToShow[0] = p.index;
                            max = p.y;
                        }
                        if (p.y < min) {
                            pointsToShow[1] = p.index;
                            min = p.y;
                        }
                    });
                    render(chart, points[pointsToShow[0]], '￥');
                    render(chart, points[pointsToShow[1]], '￥');
                    //var point = chart.series[0].points[8];
                });
                function render(chart, point, text) {
                    console.log(chart.renderer)
                    chart.renderer.label(text + ' ' + point.y, point.plotX + chart.plotLeft - 20, point.plotY + chart.plotTop - 45, 'callout', point.plotX + chart.plotLeft, point.plotY + chart.plotTop)
                        .css({
                            color: '#fff',
                            align: 'center',
                            borderWidth: "5px",
                            borderColor: "red",
                            borderStyle: "solid",
                        })
                        .attr({
                            fill: 'rgba(0, 0, 0, 0.75)',
                            padding: 8,
                            r: 5,
                            zIndex: 6,
                        })
                        .add();
                }
            }
        })
    });
</script>
</html>